<template>
	<view class="left clearfix detail-box">
		<view class="uni-header left clearfix">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>

		</view>

		<view class="detail-content left clearfix">
			<uni-table border stripe emptyText="暂无更多数据"  style="border:1px solid #ccc;min-height:200px;margin:10rpx 0" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" style="width:200px;">选项</uni-th>
					<uni-th>值</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">登录平台</uni-td>
					<uni-td :style="`color:${usersData.register_env.app_name=='易派到家'?'#e74c3c':'#2980b9'}`">
						{{usersData.register_env.app_name}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">平台版本</uni-td>
					<uni-td>
						v {{usersData.register_env.app_version}}
					</uni-td>
				</uni-tr >
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">名称</uni-td>
					<uni-td>
						<image :src="usersData.avatar" @click="eventImage(usersData.avatar)" mode="widthFix" style="width:70rpx;" ></image>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">名称</uni-td>
					<uni-td>
						{{usersData.nickname}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">手机号</uni-td>
					<uni-td>{{usersData.mobile}}</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">手机系统</uni-td>
					<uni-td>
						{{usersData.register_env.os_name}}
					</uni-td>
				</uni-tr >
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">注册IP</uni-td>
					<uni-td>
						{{usersData.register_env.client_ip}}
					</uni-td>
				</uni-tr >
				
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">账号金额</uni-td>
					<uni-td>￥{{(usersData.money / 100).toFixed(2)}}</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">账号状态</uni-td>
					<uni-td>{{usersData.status==0?'账号无异常':'账号已注销'}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">注册时间</uni-td>
					<uni-td>
						<uni-dateformat :date="usersData.register_date?usersData.register_date:''"></uni-dateformat>
					</uni-td>
				</uni-tr>
				<uni-tr v-if="shopData._id">
					<uni-td align="center" class="detail-uni-td-weight">店铺名称</uni-td>
					<uni-td style="font-size:16px">
						{{shopData.title}}
					</uni-td>
				</uni-tr>
				<uni-tr v-if="shopData._id">
					<uni-td align="center" class="detail-uni-td-weight">店铺logo</uni-td>
					<uni-td>
						<image :src="shopData.logo.path+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" @click="eventImage(shopData.logo.path)" mode="widthFix" style="width:120rpx;" ></image>
					</uni-td>
				</uni-tr>
				<uni-tr v-if="shopData._id">
					<uni-td align="center" class="detail-uni-td-weight">店铺_id</uni-td>
					<uni-td>
						{{shopData._id}}
					</uni-td>
				</uni-tr>
				<uni-tr v-if="shopData._id">
					<uni-td align="center" class="detail-uni-td-weight">店铺状态</uni-td>
					<uni-td>
						{{shopData.disabled_status?'✅':'❌'}}
					</uni-td>
				</uni-tr>
				<uni-tr v-if="shopData._id">
					<uni-td align="center" class="detail-uni-td-weight">经营状态</uni-td>
					<uni-td>
						{{shopData.business_status?'✅':'❌'}}
					</uni-td>
				</uni-tr>
				<uni-tr v-if="shopAuthentication._id">
					<uni-td align="center" class="detail-uni-td-weight">商铺法人</uni-td>
					<uni-td>
						{{shopAuthentication.legal_person_name}}
					</uni-td>
				</uni-tr>
			</uni-table>
			<view style="padding:10px;" class="titleApp">
				充值记录
			</view>
			<uni-table style="border:1px solid #ccc;min-height:80px;margin:10rpx 0"  border stripe emptyText=" 暂无充值记录 " >
				<uni-tr>
					<uni-th  align="center" class="detail-uni-td-weight" >
						充值金额
					</uni-th>
					<uni-th align="center" class="detail-uni-td-weight" >
						赠送金额
					</uni-th>
					<uni-th align="center" class="detail-uni-td-weight" >
						结算金额
					</uni-th>
					<uni-th align="center" class="detail-uni-td-weight" >
						类型
					</uni-th>
					<uni-th align="center" class="detail-uni-td-weight" >
						是否结算
					</uni-th>
					<uni-th  align="center"   >
						完成时间
					</uni-th>
				</uni-tr>
				<uni-tr  v-for="(item,index) in userRecharge"  :key="index" >
					<uni-td  align="center">
						<text class="fontColorApp">
							¥{{((item.money - item.give_money) / 100 ).toFixed(2)}}
						</text>
					</uni-td>
					<uni-td  align="center">
						<text class="fontColorApp">
							¥{{ ( item.give_money / 100 ).toFixed(2)}}
						</text>
					</uni-td>
					<uni-td  align="center">
						<text class="fontColorApp">
							¥{{ ( item.money / 100 ).toFixed(2)}}
						</text>
					</uni-td>
					<uni-td  align="center">
						{{ ( item.type)}}
					</uni-td>
					<uni-td  align="center" >
						{{item.is_pay? "已付款": "未付款" }}
					</uni-td>
					<uni-td  align="center">
						<uni-dateformat :date="item.create_date" ></uni-dateformat>
					</uni-td>
				</uni-tr>
			</uni-table>
			
			<view style="padding:10px;" class="titleApp">
				有效订单
			</view>
			<uni-table style="border:1px solid #ccc;min-height:80px;margin:10rpx 0"  border stripe emptyText=" 暂无有效订单 " >
				<uni-tr>
					<uni-th style="width:50px;" align="center" class="detail-uni-td-weight" >
						#
					</uni-th>
					<uni-th style="width:200px;" align="center" class="detail-uni-td-weight" >
						商铺
					</uni-th>
					<uni-th style="width:300px;" align="center" class="detail-uni-td-weight" >
						订单号
					</uni-th>
					<uni-th style="width:100px;" align="center" class="detail-uni-td-weight" >
						订单金额
					</uni-th>
					<uni-th style="width:100px;" align="center" class="detail-uni-td-weight" >
						订单类型
					</uni-th>
					<uni-th  align="center" class="detail-uni-td-weight" >
						完成时间
					</uni-th>
					<uni-th align="center">
						操作
					</uni-th>
				</uni-tr>
				<uni-tr  v-for="(item,index) in usersOrder" >
					<uni-td  align="center">
						{{item.serial_number}}
					</uni-td>
					<uni-td  align="center">
						<text class="titleApp">
							{{item.shop_id[0].title}}
						</text>
					</uni-td>
					<uni-td  align="center">
						{{item.order_no}}
					</uni-td>
					<uni-td class=" "  align="center" >
						<text class="fontColorApp">
							￥{{ (item.total_price/100).toFixed(2) }}
						</text>
					</uni-td>
					<!-- 类型 -->
					<uni-td align="center" >
						{{item.type==2?'到店就餐':item.service_text=='预约时间送达'?'按预约时间送达':'外卖配送'}}
					</uni-td>
					
					<uni-td  align="center">
						<uni-dateformat :date="item.status.create_time" ></uni-dateformat>
					</uni-td>
					<uni-td  align="center"> 
						<button size="mini"  @click="navigateTo('/pages/order/uni-pay-orders/detail?id='+item.order_no, false)" type="">查详情</button>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view style="padding:10px;" class="titleApp">
				地址信息
			</view>
			<uni-table style="border:1px solid #ccc;min-height:80px;margin:10rpx 0"  border stripe emptyText=" 暂无有效订单 " >
				<uni-tr>
					<uni-th style="width:50px;" align="center" class="detail-uni-td-weight" >
						#
					</uni-th>
					<uni-th  align="center" class="detail-uni-td-weight" >
						联系人
					</uni-th>
					<uni-th  align="center" class="detail-uni-td-weight" >
						门牌号
					</uni-th>
					<uni-th  align="center" class="detail-uni-td-weight" >
						手机号
					</uni-th>
					<uni-th   align="center" class="detail-uni-td-weight" >
						性别
					</uni-th>
					<uni-th  align="center" class="detail-uni-td-weight" >
						地标名称
					</uni-th>
					<uni-th align="center">
						详细收货地址
					</uni-th>
				</uni-tr>
				<uni-tr  v-for="(item,index) in users_address" >
					<uni-td align="center">
						# <text class="telApp" >{{index+1}}</text>
					</uni-td>
					<uni-td align="center">
						<text class="titleApp">
							{{item.name}}
						</text>
					</uni-td>
					<uni-td align="center">
							{{item.address_detail}}
					</uni-td>
					<uni-td align="center">
						{{item.phone}}
					</uni-td>
					<uni-td align="center">
						{{item.sex==1?'先生':'女士'}}
					</uni-td>
					<uni-td align="center">
						{{item.title}}
					</uni-td>
					<uni-td align="center">
						{{item.address}}
					</uni-td>
				</uni-tr>
			</uni-table>
			
			<view style="padding:10px;" class="titleApp">
				访问记录
			</view>
			<uni-table style="border:1px solid #ccc;min-height:80px;margin:10rpx 0"  border stripe emptyText=" 暂无有效订单 " >
				<uni-tr >
					<uni-th align="center">
						访问人头像
					</uni-th >
					<uni-th align="center">
						访问人昵称
					</uni-th >
					<uni-th align="center">
						设备信息
					</uni-th>
					<uni-th align="center">
						所属乡镇
					</uni-th>
					<uni-th align="center">
						访问端口来源
					</uni-th>
					<uni-th align="center">
						访问页面名称
					</uni-th>
					<uni-th align="center">
						访问次数
					</uni-th>
					<uni-th align="center">
						访问时间
					</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in pageViewData" >
					<uni-td align="center">
						<image v-if="item.user.avatar" :src="item.user.avatar+'?x-oss-process=image/resize,m_fixed,h_50,w_50'" mode="widthFix"
							style="width:70rpx;border-radius:50%;"></image>
					</uni-td >
					<uni-td align="center">
						<text class="title titleApp" >
							{{item.user.nickname}}
						</text>
					</uni-td >
					<uni-td align="center">
						{{item.device.brand}}
					</uni-td>
					<uni-td align="center">
						{{item.user.location_poi}}
					</uni-td>
					<uni-td align="center">
						{{item.source}}
					</uni-td>
					<uni-td align="center">
						{{item.page_title}}
					</uni-td>
					<uni-td align="center">
						{{item.number}}
					</uni-td>
					<uni-td align="center">
						<uni-dateformat :date="item.create_date.time_stamp"></uni-dateformat>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box">
				<uni-pagination @change="enventFneye" :v-model="currentPage" :pageSize="limit" title=""
					:total="total"></uni-pagination>
			</view>
			<view style="height:50px">
				
			</view>
		</view>
	</view>
</template>
<script>
	const global = uniCloud.importObject("global",{customUI:true})
	const db = uniCloud.database()
	let Where ;
	export default {
		data() {
			return {
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "",name: "系统管理"},
					{to: "",name: "用户管理"},
					{to: "",name: "用户详情"}
				],
				usersId:'',
				pageViewData:[],
				userRecharge:[],// 充值金额
				// 分页
				total: 0, //  总条数
				skip: 0, // 开始查询位置
				limit: 10, // 单词查询条数
				currentPage: 1, // 当前页
				
				usersData:{register_env:{}},
				shopData:{logo:{}},// 商铺
				shopAuthentication:{business_license_photo:{}} , // 商铺资质信息
				users_address:[],
				usersOrder:[]
			}
		},
		onLoad(e) {
			this.usersId = e.id
			this.getUsersData()
			this.getAddress()
			this.getPageViewData()
			this.getRecharge()
			Where = {'status.value':db.command.gte(1) ,user_id: this.usersId }
		},
		methods: {
			// 用户信息
			getUsersData(){
				global.getDataOne("uni-id-users",{_id:this.usersId},"avatar,money,status,register_date,nickname,register_env,mobile,status").then(res=>{
					this.usersData = res.data
					if(res.data.register_env.app_name=="易派商家"){
						this.getShop()
					}else{
						this.getOrders()
					}
				})
			},
			// 获取订单信息
			getOrders(){
				let order = db.collection("orders").where(Where).field("shop_id,serial_number,service_text,pay_date,type,status,order_no,total_price,user_id").getTemp({getOne:false})
				let shop =  db.collection("shop").field("title,_id").getTemp({getOne:true})
				db.collection(order,shop).orderBy("pay_date desc").limit(99).get({customUI:true}).then(res=>{
					this.usersOrder = res.result.data
				}).catch(err=>{
				})
			},
			// 获取充值记录
			getRecharge(){
				global.getDataList("recharge_log",{user_id:this.usersId}).then(res=>{
					this.userRecharge = res.data
				})
			},
			// 获取用户地址
			getAddress(){
				global.getDataList("users_address",{user_id:this.usersId}).then(res=>{
					if(res.data.length != 0){
						this.users_address = res.data
					}else{
						uni.showToast({
							title:'当前用户暂未添加收货地址请稍后重试',
							icon:"none"
						})
						this.is_bool = false
					}
				})
			},
			// 获取店铺数据
			getShop(){
				global.getDataOne("shop",{create_uid:this.usersId},"title,logo,disabled_status,business_status").then(res=>{
					if(res.data){
						this.shopData = res.data
						this.getOrders()
						Where =  {'status.value':5,shop_id:res.data._id }
						global.getDataOne("shop_authentication",{user_id:this.usersId},
							"legal_person_card_photo_z.path,business_license_photo,legal_person_name,user_id"
						).then(res=>{
							this.shopAuthentication = res.data
						})
						
					}
				})
			},
			/*访问记录*/
			getPageViewData(){
				this.loading1 = true
				let pageViewField = "user,device,appid,source,page,page_title,number,create_date"
				let wherePageView = {
					"user.user_id":this.usersId
				}
				db.collection("page_view")
					.where(wherePageView)
					.orderBy("create_date.time_stamp desc")
					.field(pageViewField)
					.limit(this.limit).skip(this.skip)
				.get({getOne:false,getCount: true,customUI:true}).then(res=>{
					this.pageViewData = res.result.data
					this.total = res.result.count
				})
			},
			// 分页
			enventFneye(val) {
				this.skip = (val.current - 1) * 10
				this.getPageViewData()
			},
			navigateTo(url, clear) {
				// clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
				uni.navigateTo({
					url,
					events: {
						refreshData: () => {
							this.loadData(clear)
						}
					}
				})
			},
			// 放大图片
			eventImage(image){
				uni.previewImage({
					urls:[image]
				})
			},
		}
	}
</script>


<style scoped>
	.color{
		color:#ff6600;
	}
	.detail-button-box button {
		width: 50%;
		margin-left: 25%;
	}

	.detail-button-box {
		width: 100%;
		margin-top: 20px;
	}

	.detail-jujue-content {
		width: 94%;
		margin-left: 3%;
		height: 250px;
		border: 1px solid #eee;
		margin-top: 20px;
		border-radius: 5px;
	}

	.detail-juju-title label:last-child {
		margin-right: 1rem;
	}

	.detail-juju-title label:first-child {
		margin-left: 1rem;
		font-weight: bold;
		color: #666;
	}

	.detail-juju-title label {
		line-height: 3rem;
		height: 3rem;
		font-size: 1rem;
	}

	.detail-juju-title {
		height: 3rem;
		width: 100%;
		border-bottom: 1px solid #efefef;
	}

	.detail-jujue-box {
		width: 700px;
		height: 400px;
		background: #fff;
		border-radius: 5px;
	}

	.detail-bottom-button button {
		margin-right: 20px;
	}

	.detail-bottom-button {
		height: 50px;
		line-height: 50px;
		margin-top: 50px;
		margin-bottom: 50px;
		text-align: center;
		width: 100%;
	}

	.detail-uni-td-weight {
		font-weight: bold;
	}

	.detail-id-card label {
		float: left;
		width: 300px;
		height: 180px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-left: 20px;
	}

	.detail-image label {
		float: left;
		width: 70px;
		height: 70px;
		border: 1px solid #ccc;
		margin: 10px;
	}

	.uni-header {
		width: 100%;
	}

	.detail-box {
		width: 100%;
		min-height: 800px;
		background: #fff;
	}

	.detail-content {
		width: 90%;
		min-height: 600px;
		margin-left: 5%;
		margin-top: 20px;
	}
</style>